<template>
  <div v-loading.lock="loading"
    class="base-content">
    <div class="basic-info storage-order-in-list">
      <el-form ref="queryForm"
        :inline="true"
        :model="queryForm"
        label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="入库单编号"
              prop="orderNum">
              <el-input v-model="queryForm.orderNum"
                placeholder="请输入入库单编号"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型"
              prop="orderTypeCode">
              <el-select v-model="queryForm.orderTypeCode"
                placeholder="请选择业务类型"
                clearable>
                <el-option v-for="item in orderTypeData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态"
              prop="status">
              <el-select v-model="queryForm.status"
                placeholder="请选择状态"
                clearable>
                <el-option label="全部"
                  :value="null" />
                <el-option v-for="item in statusTypeData"
                  :key="item.value"
                  :label="item.name"
                  :value="parseInt(item.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓库"
              prop="storageId">
              <el-select v-model="queryForm.storageId"
                placeholder="请选择入库仓库"
                filterable
                clearable>
                <el-option v-for="item in storageIdData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间"
              prop="createDate">
              <el-date-picker v-model="queryForm.createDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人"
              prop="personLiableName">
              <el-input v-model="queryForm.personLiableName"
                placeholder="请输入责任人"
                clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="base-content-operate">
        <el-button v-rights="'Create'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew">新增</el-button>
        <el-button type="primary"
          icon="el-icon-search"
          @click="onQuery">查询</el-button>
        <el-button @click="cancelForm">清空</el-button>
      </div>

      <el-table :data="list"
        height="calc(100% - 130px)"
        style="width: 100%">
        <el-table-column label="入库单编号">
          <template slot-scope="scope">
            <el-button v-rights="'Query'"
              size="mini"
              type="text"
              style="text-decoration:underline;"
              @click="handleView(scope.row)">
              {{ scope.row.orderNum }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="业务类型">
          <template slot-scope="scope">
            {{ scope.row.orderTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column label="入库仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="应收总数">
          <template slot-scope="scope">
            {{ scope.row.receiveAmount }}
          </template>
        </el-table-column>
        <el-table-column label="实收总数">
          <template slot-scope="scope">
            {{ scope.row.confirmReceiveAmount }}
          </template>
        </el-table-column>
        <el-table-column label="责任人">
          <template slot-scope="scope">
            {{ scope.row.personLiableName }}
          </template>
        </el-table-column>
        <el-table-column label="处理人">
          <template slot-scope="scope">
            {{ scope.row.disposePersonName }}
          </template>
        </el-table-column>
        <el-table-column label="创建人">
          <template slot-scope="scope">
            {{ scope.row.createUserName }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作时间">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link v-if="scope.row.status == 100"
                v-rights="'Update'"
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)">编辑</el-link>
              <el-link v-if="scope.row.status == 100 || scope.row.status == 200"
                v-rights="'InProgress'"
                size="mini"
                type="primary"
                @click="handleHandle(scope.row)">处理</el-link>
              <el-link v-if="scope.row.status == 100 || scope.row.status == 200"
                v-rights="'Invalid'"
                size="mini"
                type="danger"
                @click="handleVoid(scope.row)">作废</el-link>
              <!-- <el-link
                v-rights="'Delete'"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-link
              > -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange" />
    </div>

    <StorageOrderEdit v-if="dialogFormVisible"
      ref="StorageOrderEdit"
      :edit-id.sync="editId"
      :create-time.sync="createTime"
      :order-num.sync="orderNum"
      :dialog-form-visible.sync="dialogFormVisible" />
    <StorageOrderDetails v-if="dialogDetailsVisible"
      ref="StorageOrderDetails"
      :edit-id.sync="editId"
      :create-time.sync="createTime"
      :order-num.sync="orderNum"
      :dialog-details-visible.sync="dialogDetailsVisible" />
    <StorageOrderHandle v-if="dialogHandleVisible"
      ref="StorageOrderHandle"
      :edit-id.sync="editId"
      :create-time.sync="createTime"
      :order-num.sync="orderNum"
      :dialog-handle-visible.sync="dialogHandleVisible" />
  </div>
</template>

<script>
import { getDictList } from "../../../../api/System/SystemDict.js";
import { deleteRecord, getList, getStorageList, invalidOrder, inProgressOrder } from "../../../../api/Storage/StorageOrderIn.js";
import StorageOrderEdit from "./StorageOrderEdit.vue";
import StorageOrderDetails from "./StorageOrderDetails.vue";
import StorageOrderHandle from "./StorageOrderHandle.vue";
import { MessageBox } from 'element-ui'

export default {
  name: "StorageOrderInList",
  components: { StorageOrderEdit, StorageOrderDetails, StorageOrderHandle },
  data() {
    return {
      loading: true,
      list: [],
      orderTypeData: [],
      statusTypeData: [],
      storageIdData: [],
      queryForm: {
        orderNum: "",
        orderTypeCode: null,
        status: null,
        storageId: null,
        createDate: [],
        personLiableName: "",
      },
      dialogFormVisible: false,
      dialogDetailsVisible: false,
      dialogHandleVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      editId: '',
      createTime: '',
      orderNum: ''
    };
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    async init() {
      // 查询字典表
      // 业务类型
      getDictList({ dictCode: "StorageOrder_Into_OrderTypeCode" }).then((res) => {
        this.orderTypeData = res.data;
      });
      // 订单状态
      getDictList({ dictCode: "StorageOrder_StatusCode" }).then((res) => {
        this.statusTypeData = res.data;
      });
      await this.getStorageOptions();
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          this.storageIdData = res.data.dataList;
          resolve();
        });
      })
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      const { createDate, ...queryForm } = this.queryForm
      getList({
        ...queryForm,
        startCreateTime: Array.isArray(createDate) ? createDate[0] : '',
        endCreateTime: Array.isArray(createDate) ? createDate[1] : '',
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      })
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      // this.$refs.StorageOrderEdit.formData = this.Helper.deepCopy(
      //   this.$refs.StorageOrderEdit.initData
      // );
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleView(rowData) {
      this.dialogDetailsVisible = true;
      this.editId = rowData.id
      this.createTime = rowData.createTime
      this.orderNum = rowData.orderNum
    },
    // 编辑
    handleEdit(rowData) {
      this.dialogFormVisible = true;
      this.editId = rowData.id
      this.createTime = rowData.createTime
      this.orderNum = rowData.orderNum
    },
    // 处理
    handleHandle(rowData) {
      if (rowData.status === 200) {
        this.dialogHandleVisible = true;
        this.editId = rowData.id
        this.createTime = rowData.createTime
        this.orderNum = rowData.orderNum
      } else {
        MessageBox.confirm('是否确认开始处理?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          inProgressOrder({
            id: rowData.id
          }).then(res => {
            this.dialogHandleVisible = true;
            this.editId = rowData.id
            this.createTime = rowData.createTime
            this.orderNum = rowData.orderNum
          })
        }).catch(action => {
        });
      }
    },
    // 作废
    handleVoid(rowData) {
      const params = []
      params.push(rowData.id)
      MessageBox.confirm('此操作将报废该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        invalidOrder({
          ids: params
        }).then(res => {
          this.getList();
        })
      }).catch(action => {
      });
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.storage-order-in-list {
  .el-form-item__content {
    width: calc(100% - 90px);
  }
}
</style>
